<template>
	<page-container :shownav="true" :isback="true" :navtitle="navtitle" :istabbox="false">
		<view class="index-root">
			<!-- 新闻列表 begin -->
			<view class="content-item news-list">
				<view class="row">
					<view class="u-search">
						<u-search @search="queryList" placeholder="搜索关键字" v-model="keyword"
							:showAction="false"></u-search>
					</view>
					<scroll-view class="content-box" scroll-y style="height: 100%;" @scrolltolower="onBottom">
						<news-item :info="newList" bkColor="#fff"></news-item>
						<!-- <view class="grid" @click="goDetail({detailData:item.id})" v-for="item in newList"
							:key="item.id">
							<view class="img">
								<image
									:src="item.newsCover && item.newsCover !== '' ? item.newsCover : '/static/img/home/news-1.png'" />
							</view>
							<view class="info">
								<view class="title">
									{{ item.newsTitle }}
								</view>
								<view class="time">{{ item.createTime }}</view>
							</view>
						</view> -->
					</scroll-view>
					<u-loadmore :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
						margin-bottom="30" />
				</view>
			</view>
			<!-- 新闻列表 end -->
		</view>
		<u-loading-page :loading="loading"></u-loading-page>
	</page-container>
</template>

<script>
	import NewsItem from '@/components/news-item'; //全局图片组件
	import {
		getQueryHeaders,
		requestGet
	} from "@/util/means/request";
	import {
		NEWS_LIST
	} from "@/api/news";
	import {
		getFileAccessHttpUrl
	} from "@/util/fileUtil";
	export default {
		name: "index",
		// mixins: [baseMixins],
		components: {
			NewsItem,
		},
		data() {
			return {
				keyword: "",
				loading: false,
				newList: [], // 小图列表

				messageType: 1,
				navtitle: '新闻动态',
				pageNo: 1,
				pageSize: 500,
				total: 1,
				contentHeight: '',

				status: 'nomore ', //nomore\loadmore
			}
		},
		methods: {

			goDetail(detailData) {
				// this.goSubPage(`${messageDetailsPage}?talkNewsId=${detailData.detailData}`)
			},
			queryList() {
				console.log("this.keyword", this.keyword)
				this.getNewsAndAnnouncement()
			},
			//获取新闻的方法
			getNewsAndAnnouncement() {
				this.loading = true
				let ower = this
				requestGet({
					url: NEWS_LIST,
					data: {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						newsType: this.messageType,
						keyword: this.keyword
					},
					header: getQueryHeaders()
				}).then(res => {
					if (this.pageNo == 1) {
						this.newList = []
					}

					this.total = res.total
					this.newList.push(...res.records)
					// ower.newList = res.records
				}).finally(res => {
					ower.loading = false
				})
			},

			onBottom() {
				if (this.pageNo < Math.ceil(this.total / this.pageSize)) {
					this.pageNo = ++this.pageNo;
					this.getNewsAndAnnouncement()
				} else {
					this.status = 'nomore';
					return
				}
			},
		},
		created() {},
		mounted() {},
		onLoad(e) {
			if (e.type) {
				this.messageType = e.type
				if (this.messageType == 1) {
					this.navtitle = "工作动态"
				} else {
					this.navtitle = "通知公告"
				}
				this.getNewsAndAnnouncement()
			}
		},
	}
</script>

<style scoped lang="scss">
	.index-root {
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 30rpx;
		box-sizing: border-box;

		.page-root-bg {
			width: 100vw;
			height: 100vh;
			background: url('@/static/img/bg.png');
			background-size: 100% 100%;

			.content-box {
				width: 100%;
				height: 88%;
				padding: 20rpx;
			}
		}

		.content-item {
			width: 100%;
			// padding: 20rpx 40rpx;
			border-radius: $border-radius-lg;

			.row {
				display: flex;
				flex-wrap: wrap;

				.grid {
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 10rpx 0;

					image {
						width: 70rpx;
						height: 70rpx;
						margin-bottom: $spacing-row-base;
					}

					.title {
						font-size: $font-size-base;
						color: $text-color-base;
						display: flex;
						align-items: baseline;
					}
				}
			}
		}

		/deep/ .uni-scroll-view {
			height: auto;
		}

		/deep/ .uni-scroll-view-content {
			height: auto;
		}

		.news-list {
			.grid {
				width: 100% !important;
			}

			.row {
				// height: 100%;
				height: auto;
				margin: 0 0 40rpx 0;

				.u-search {
					width: 100%;
					margin: 0 0 20rpx 0;
				}

				.grid-one {
					flex-direction: unset;
					align-items: start;
					background-color: $bg-color-white;
					// padding: 20rpx 0;
					// padding: 30rpx;
					border-radius: $border-radius-lg;
					margin: 10rpx 0;
					width: 100%;

					image {
						width: 100%;
						height: 200px;
						border-radius: $border-radius-lg;
					}

					.title {
						// align-items: center;
						font-size: $font-size-lg;
						padding: 20rpx;
					}
				}

				.grid {
					flex-direction: unset;
					align-items: start;
					background-color: $bg-color-white;
					// padding: 20rpx 0;
					padding: 30rpx;
					// border-bottom: 1rpx solid #c7c7c7;
					border-radius: $border-radius-lg;

					.img {
						width: 180rpx;
						height: 150rpx;
						margin-bottom: 0;
					}

					image {
						width: 180rpx;
						height: 150rpx;
						margin-bottom: 0;
						border-radius: $border-radius-lg;
					}

					.info {
						margin: 10rpx 0 10rpx 30rpx;
					}

					.title {
						font-size: 30rpx;
						align-items: center;
						// padding: 20rpx;
					}

					.time {
						margin-top: 20rpx;
						color: #ababab;
						font-size: 26rpx;
					}

					.view {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 100%;
						/* height: 100%; */
						background-color: rgba(255, 255, 255, 0.6);
						padding: 10rpx 0;
					}
				}
			}
		}

	}
</style>